<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">顶部</div>
	<div data-options="region:'west',split:true,title:'主菜单'" style="width:180px;">
		<div class="easyui-accordion" style="border: 0">
			<div title="布局" data-options="iconCls:'icon-ok'"   style="overflow:auto;padding:10px;padding-bottom: 30px;">
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('标签页tab','demo/tab.html')">标签页tab</a></h4>
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('综合布局','demo/zhbj.html')">综合布局</a></h4>
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('面板Panel','demo/mianban.html')">面板Panel</a></h4>
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('折叠面板','demo/zdmb.html')">折叠面板</a></h4>
			</div>
			<div title="菜单&按钮" data-options="iconCls:'icon-filter'" style="padding:10px;padding-bottom: 50px;">
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('菜单&按钮','demo/anniu.html')">菜单&按钮</a></h4>			
			</div>
			<div title="表单" data-options="iconCls:'icon-filter'" style="padding:10px;padding-bottom: 50px;">
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('from','demo/form.html')">form</a></h4>			
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('combo','demo/combo.html')">combo</a></h4>			
			</div>
			<div title="数据网格" data-options="iconCls:'icon-filter'" style="padding:10px;padding-bottom: 50px;">
				<h4><a href="#" style="color:#0099FF;text-decoration: none;" onclick="addTab('DataGrid','demo/DataGrid.html')">DataGrid</a></h4>			
			</div>
			<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;padding-bottom: 50px;">
				<ul class="easyui-tree">
					<li>
						<span>Foods</span>
						<ul>
							<li>
								<span>Fruits</span>
								<ul>
									<li>apple</li>
									<li>orange</li>
								</ul>
							</li>
							<li>
								<span>Vegetables</span>
								<ul>
									<li>tomato</li>
									<li>carrot</li>
									<li>cabbage</li>
									<li>potato</li>
									<li>lettuce</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>		
	</div>
	<!-- <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">右侧</div> -->
	<div data-options="region:'south',border:false,split:true,collapsed:true" style="height:60px;background:#A9FACD;padding:10px;">底部</div>
	<div data-options="region:'center'" style="border: 0">
			<div id="center" class="easyui-tabs" style="border: 0;" fit="true"></div>
	</div>
	
</body>
<script type="text/javascript">
	function addTab(title, url){
		if ($('#center').tabs('exists', title)){
			$('#center').tabs('select', title);
		} else {
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
			$('#center').tabs('add',{
				title:title,
				content:content,
				closable:true
			});
		}
	}
</script>
</html>